<template lang="html">
  <div>
    <div class="search">
        <div class="input">
            <p><label>报告名称：</label><el-input placeholder="请输入内容" v-model="pageData.storeName"></el-input></p>
             <p><el-button type="primary" class="se" style="margin-left:10px;" @click="search">搜索</el-button></p>
        </div>
    </div>
    <div class="add">
       <el-button type="primary" @click="add">新增</el-button>
    </div>
    <tableVue :list="list" :state="false" v-loading="pageData.loading" :total="total" @sizeChange="handSize">
        <slot>
          <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.row,1)">编辑
                </el-button>
                <el-button
                  size="mini"
                  type="danger"
                  class="del"
                  @click="del(scope.row,2)">删除</el-button>
              </template>
          </el-table-column>
        </slot>
    </tableVue>
      <el-dialog
        title="操作"
        :visible.sync="dialog"
        width="80%">
        <el-form :model="pageData" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
          <el-form-item label="检测选项名称" prop="title">
              <el-input v-model="pageData.title" placeholder="请输入内容"></el-input>
           </el-form-item>
           <el-form-item label="质检结果概述" prop="title">
               <el-input v-model="pageData.reportResult" placeholder="请输入内容"></el-input>
            </el-form-item>
           <el-form-item label="质检人员" prop="title">
             <el-select v-model="pageData.qualityUserId" placeholder="请选择">
                <el-option
                  v-for="item in qualityUser"
                  :key="item.qualityUserId"
                  :label="item.qualityUserName"
                  :value="item.qualityUserId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="质检科目" prop="title">
              <el-select v-model="pageData.subjectId" placeholder="请选择" @change="getsubjectId">
                 <el-option
                   v-for="item in subject"
                   :key="item.subjectId"
                   :label="item.subjectName"
                   :value="item.subjectId">
                 </el-option>
               </el-select>
             </el-form-item>
             <el-form-item label="质检结果">
              </el-form-item>
               <tableVue :list="reportlist" :state="false" :pagination="true" v-if="pageData.subjectId">
                   <slot>
                     <el-table-column label="操作" align="center">
                         <template slot-scope="scope">
                           <el-form class="demo-form-inline" v-for="item in scope.row['attrList']" :key="item.id" label-width="80px">
                            <el-form-item
                              class="item-val"
                              :label="item.attrName">
                              <el-input v-model="item['input_attrValue']" placeholder="请输入内容" v-if="item.isInput == 'Y'"></el-input>
                              <el-select v-model="item['input_attrValue']" placeholder="请选择" v-else>
                                 <el-option
                                   v-for="val in item.valList"
                                   :key="val.attrValId"
                                   :label="val.attrVal"
                                   :value="val.attrValId">
                                 </el-option>
                               </el-select>
                             </el-form-item>
                             <el-form-item label="是否通过" prop="title" class="item-val">
                               <!-- pageData.isPass -->
                               <el-select v-model="item['select_isPass']" placeholder="请选择">
                                  <el-option
                                    v-for="data in isPass"
                                    :key="data.id"
                                    :label="data.label"
                                    :value="data.value">
                                  </el-option>
                                </el-select>
                              </el-form-item>
                            </el-form>

                         </template>
                     </el-table-column>
                   </slot>
               </tableVue>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary" v-if="btnState == '1'" @click="upForm('post')">确 定</el-button>
          <el-button type="primary" v-if="btnState == '2'" @click="upForm('post')">编辑</el-button>

        </span>
      </el-dialog>
  </div>
</template>

<script>
  import Data from './qualityReportData.js'
  import dialogVue from '@/components/dialog.vue'
  import tableVue from '@/components/alltable.vue'
  import {
    reportList,
    allQualityUserList,
    allCourseList,
    getcourseList,
    reportdetail,
    delAttribute,
    addreport,
    delreport
  } from "@/api/shoppingCentre/shoppingCentre";
  export default {
    components : {
      tableVue,
      dialogVue
    },
    data () {
      return JSON.parse(JSON.stringify(Data))
    },
    mounted () {
      this.getreportListList({});
      this.getqualityUserList();
      this.getallCourseList();

    },
    methods : {
      getallCourseList () {//所有科目
        allCourseList().then(res=>{
          if (res.data.code == 'OK') {
            this.subject = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      getsubjectId (subjectId) {//根据科目Id获取一下的组
        getcourseList(subjectId).then(res=>{
          this.reportlist.tbody = res.data.data;
        })
      },
      getqualityUserList (data) {//质检人员列表
          allQualityUserList(data).then(res=>{
            if (res.data.code == 'OK') {
              this.qualityUser = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          })
      },
      getreportListList (data) {//报告列表
        // this.pageData.loading = true;
          reportList(data).then(res=>{
            if (res.data.code == 'OK') {
              this.pageData.loading = false;
              this.total = res.data.data.total;
              this.list.tbody = res.data.data.records.map(item=>{
                 item.gmtCreate = this.switchTime(item.gmtCreate)
                 item.gmtUpdate = this.switchTime(item.gmtUpdate)
                 return item;
              });
            } else {
               setTimeout(()=>{
                 this.pageData.loading = false;
               },2000)
            }
          })
      },
      add () {
        this.pageData = {}
        this.btnState = '1'
        this.dialog = true;
        // this.$refs.ruleForm&&this.$refs.ruleForm.resetFields()
      },
      handleSelectionChange () {

      },
      search () {
        var data = {
          size : '10',
          title : this.pageData.storeName
        }
        this.getreportListList(data);
      },
      changeData (data) {
        this.dialog = data;
      },
      handSize (val) {
        var data = {
          current :val,
          size : '10'
        }
        this.getreportListList(data);
      },
      handleEdit (item) {
        this.btnState = '2'

        this.reportId = item.reportId
        reportdetail(item.reportId).then(res=>{
          if (res.data.code == 'OK') {
              this.dialog = true;
            let datas = res.data.data;
            this.pageData.title = datas.title
            this.pageData.reportResult = datas.reportResult
            this.pageData.subjectId = datas.qualitySubject.subjectId
            this.pageData.qualityUserId = datas.qualityUser.qualityUserId
              // this.getsubjectId(this.pageData.subjectId);

              getcourseList(this.pageData.subjectId).then(res=>{
                this.reportlist.tbody = res.data.data.map((item,idx)=>{
                  item.attrList.map((arr,idx_arr)=>{
                    arr['input_attrValue'] = arr.isInput == 'Y'?datas.groupItems[idx].options[idx_arr].attrVal:datas.groupItems[idx].options[idx_arr].attrValId;
                    arr['select_isPass'] = datas.groupItems[idx].options[idx_arr].isPass;
                  })
                  return item
                })
              })
          }
        })
      },
      details (item) {
        this.$router.push({
          name : 'addAttributeVal',
          query : {
            id : JSON.stringify(item.attrId)
          }
        })
      },
      del (item) {
        this.delMessage(()=>{
          var id = [];
          id.push(item.reportId)
          delreport(id).then(res=>{
            if (res.data.code == 'OK') {
              this.$message.success('删除成功');
              this.getreportListList({});
            } else {
              this.$message.error(res.data.message);
            }
          })
        })
      },
      upForm (method) {
        this.$refs.ruleForm.validate((valid) => {
            if (valid) {
              let data = {
                title : this.pageData.title,
                qualityUserId : this.pageData.qualityUserId,
                subjectId : this.pageData.subjectId,
                reportResult : this.pageData.reportResult,
                reportId : this.reportId,
                resultItemList :[]
              }
              this.reportlist.tbody.map((item)=>{
                 item.attrList.map((arr)=>{
                   let arrVal_Object = arr.valList.find(attrV=> attrV.attrValId==arr.input_attrValue);
                   data.resultItemList.push({
                     groupId:item.groupId,
                     attrNameId:arr.attrId,
                     attrName:arr.attrName,
                     attrValId:arr.isInput == 'Y'?'':arr.input_attrValue,
                     attrVal:arr.isInput == 'Y'?arr.input_attrValue:(arrVal_Object?arrVal_Object.attrVal:''),
                     isPass:arr.select_isPass
                   })
                 })
              })
              addreport(data,method).then(res=>{
                if (res.data.code == 'OK') {
                    this.dialog = false;
                    this.getreportListList({});
                    if (method == 'post') {
                      this.$message.success('操作成功');
                    } else {
                       this.$message.success('操作成功');
                    }
                 } else {
                   this.$message.error(res.data.message)
                 }
              })
            }
        })
      }
    }
  }
</script>

<style scoped>
  @import "../../../../styles/common.css";
  .demo-form-inline {
    display: flex;
  }
  .item-val {
    display: flex;
  }
  .el-form-item__label {
    width: 140px;
  }
  /* .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  } */
</style>
